<template>
  <div id="comp-exportUserDialog">
    <el-dialog title="导入员工" width="30%" :visible.sync="isDialog" :before-close="beforeClose" :close-on-click-modal="false">
      <div v-if="!isImportSuccess" class="startImport">
        <div class="container">
          <div class="btns">
            <el-upload action="" accept=".xls, .xlsx" :show-file-list="false" :http-request="uploadFile" ref="upload">
              <el-button :loading="isBtnLoading" type="primary">
                导入文件
              </el-button>
            </el-upload>
            <div class="text" @click="downloadTemplate">下载模板</div>
          </div>
          <div class="desc">
            <p>导入注意事项：</p>
            <p>1、工号手机号必须是唯一的</p>
            <p>2、部门是必填的。当系统中不存在此部门时系统会自动创建一级部门</p>
            <p>3、导入员工的默认密码为123456,为了数据安全在导入成功后请通知员工尽快更改</p>
          </div>
        </div>
      </div>
      <div v-else class="endImport">
        <div class="text">您导入的文件中，有以下（ <span class="spc-txt">{{tableData.length || 0}}</span> ）条失败,其余已导入成功</div>
        <el-table :data="tableData" height="300" style="width: 100%">
          <el-table-column prop="workNumber" header-align="left" width="100" align="left" label="工号">
          </el-table-column>
          <el-table-column prop="realName" header-align="left" width="100" align="left" label="姓名">
          </el-table-column>
          <el-table-column prop="errorDesc" header-align="left" min-width="200" align="left" label="失败原因">
          </el-table-column>
        </el-table>
        <div class="tips">
          您可<span class="spc-tips" @click="downloadFile">点击此处</span>
          <!-- header="这是个excel的头部"
          <download-excel class="export-excel-wrapper" :data="tableData" :fields="json_fields" type="xls" name="错误员工信息表.xls">
            <span class="spc-tips">点击此处</span>
          </download-excel> -->
          下载错误员工信息，修改后重新导入
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <template v-if="!isImportSuccess">
          <el-button @click="isDialog = false">取 消</el-button>
          <!-- <el-button type="primary" @click="isDialog = false">导 入</el-button> -->
        </template>
        <el-upload v-else action="" accept=".xls, .xlsx" :show-file-list="false" :http-request="uploadFile" ref="upload">
          <el-button type="primary" :loading="isBtnLoading">重新导入</el-button>
        </el-upload>
        <!-- <el-button v-else type="primary" @click="isDialog = false">重新导入</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'exportUserDialog',
  props: {
    exportUserDialog: {
      type: Boolean
    },
    subCompanyId: {
      type: String
    }
  },
  computed: {
    isDialog: {
      get() {
        return this.exportUserDialog;
      },
      set(newVal) {
        if (!newVal) this.init();
        this.$emit('update:exportUserDialog', newVal);
      }
    },
    ...mapState({
      userInfo: state => state.common.userInfo,
    })

  },
  data() {
    return {
      // json_fields: {
      //   '*工号': "workNumber",
      //   '*姓名': "realName",
      //   '*性别': "gender",
      //   '*手机号': "userMobile",
      //   '*部门': "deptName",    //如果命名的标题有空格,需要用双引号
      //   '*角色': "roleName"
      //   // '*错误信息': "errorDesc"
      // },
      // json_meta: [
      //   [
      //     {
      //       " key ": " charset ",
      //       " value ": " utf- 8 "
      //     }
      //   ]
      // ],
      isImportSuccess: false,
      tableData: [],
      isDownLoad: false, //false没有下载过   ture已经下载过了不能再下载了
      isBtnLoading: false
    };
  },
  methods: {
    downloadFile() {
      if (this.isDownLoad) return;
      // console.log(this.$api.publicApi.exportFile({subCompanyId:this.subCompanyId}))
      window.open(this.$api.publicApi.exportFile({ subCompanyId: this.subCompanyId }));
      this.isDownLoad = true;
      // let params = []
      // this.tableData.map(i => {
      //   params.push({
      //     workNumber: i.workNumber,
      //     realName: i.realName,
      //     gender: i.gender,
      //     userMobile: i.userMobile,
      //     deptName: i.deptName,
      //     roleName:i.roleName
      //   })
      // })
      // this.$api.publicApi.exportFile(params).then(res => {
      //   console.log(res)
      // })
    },
    beforeClose(done) {
      if (this.isImportSuccess && !this.isDownLoad) {
        this.$confirm('确认关闭时系统会为您自动下载错误,以便您下次直接使用', '您还有待修改的信息,确认关闭吗?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.downloadFile();
          done();
        });
      } else {
        done();
      }
    },
    init() { //初始化数据
      this.isImportSuccess = false;
      this.isDownLoad = false;
    },
    uploadFile(params) { //文件上传
      const file = params.file;
      const form = new FormData();
      form.append('file', file);
      this.isBtnLoading = true;
      this.$api.publicApi.importFile(form, this.subCompanyId).then((res) => {
        const resData = res.data;
        this.isBtnLoading = false;
        if (resData.status === 200 && !resData.data) {
          this.$message({ type: 'success', message: '导入成功' });
          this.isDialog = false;
        }
        if (resData.status === 200 && resData.data.length) {
          this.tableData = res.data.data;
          this.isImportSuccess = true;
        } else {
          this.isImportSuccess = false;
        }
      }).catch(() => {
        this.isBtnLoading = false;
      });
    },
    downloadTemplate() { //下载模板
      window.open('https://enterprisefile-file.oss-cn-beijing.aliyuncs.com/员工导入模板.xls');
      this.isImportSuccess = false;
    }
  }
};
</script>

<style lang="less" scoped>
#comp-exportUserDialog {
  :deep( .el-dialog) {
    min-width: 600px;
  }
  :deep( .el-table th) {
    text-align: left !important;
  }
  :deep( .el-table th.el-table__cell) {
    background: #f7f8fc;
  }
  :deep( .el-dialog__footer .dialog-footer) {
    display: block;
    padding: 0;
  }
  .startImport {
    .container {
      padding: 0 20px;
      .btns {
        margin: 30px 0;
        display: flex;
        align-items: center;
        .text {
          color: #333;
          text-decoration: underline;
          margin-left: 20px;
          cursor: pointer;
        }
      }
      .desc {
        color: #333;
        font-size: 13px;
        margin-bottom: 30px;
      }
    }
  }
  .endImport {
    .text {
      margin-bottom: 20px;
      color: #333;
      .spc-txt {
        color: #e63f49;
      }
    }
    .tips {
      color: #333;
      font-size: 14px;
      margin: 50px 0 20px 0;
      display: flex;
      .spc-tips {
        text-decoration: underline;
        cursor: pointer;
        color: #5b91f4;
      }
    }
  }
}
</style>
